<template>
	<div class="ui-upload" :class="{'selected': value}" @mouseover="handleMouseover" @mouseout="showUpload = false">
		<div class="ui-upload-image" v-show="value">
			<img :src="value"/>
		</div>
		<Upload
			v-show="showUpload || !value"
			ref="upload"
			:action="action"
			:headers="headers"
			:data="params"
			name="upfile"
			:show-upload-list="false"
			:format="format"
			:max-size="maxSize"
			:before-upload="handleBeforeUpload"
	        :on-success="handleSuccess"
	        :on-format-error="handleFormatError"
	        :on-exceeded-size="handleMaxSize"
	        :on-progress="handleProgress"
	        :multiple="false"
		>
			<div class="ui-upload-btn">
	            <div class="ui-upload-btn-cell">
	            	<Icon type="ios-camera" size="24" :color="value ? '#ffffff' : '#bcc1c4'"></Icon>
					<span v-show="!hideLabel">点击上传</span>
	            </div>
	        </div>
		</Upload>
	</div>
</template>

<script>
import Util from '@/libs/util.js';
const timestamp = parseInt(new Date().getTime());
export default {
	name: 'imageUpload',
	props: {
		value: String,
		format: {										// 图片格式
			type: Array,
			default: function() {
				return ['jpg','jpeg','png', 'gif', 'bmp'];
			}
		},
		hideLabel: {
			type: Boolean,
			default: false
		},
		maxSize: {										// 图片大小限制，KB为单位
			type: Number,
			default: 2048
		}
	},
	data() {
		return {
			headers: {
				'token': localStorage.token
			},
			params: {
				method: 'api.manage.attachment.attachment.upload',
				module: 'goods',
				path: 'goods',
				timestamp: new Date().getTime()
			},
			action: Util.upload,
			showUpload: false,
			uploading: false,
			percent: 0
		}
	},
	methods: {
		handleMouseover() {
        	if(!this.uploading){
        		this.showUpload = true;
        	}
       	},
       	handleSuccess (res, file, fileList) {
       		if(res.code && res.code != 200) {
       			this.$Message.error('上传失败,'+ res.msg +'！');
       			return;
       		}
        	this.percent = 100;
        	this.$emit('input', Util.baseUrl + res.result.url);
        	setTimeout(() => {
        		this.uploading = false;
        		this.percent = 0;
        	}, 300)
        },
        handleFormatError (file) {
        	this.$Message.error('请上传'+ this.format.join('、') +'格式的文件');
        },
        handleMaxSize (file) {
        	// 单位换算
        	let _Mb = this.maxSize / 1024;
        	let f = _Mb.toString().split(".");
        	if(f.length > 1) {
        		_Mb = f[0] + '.' + f[1].substring(0, 2);
        	}
        	this.$Message.error('请选择'+ _Mb +'M以内的文件上传');
        },
        handleBeforeUpload () {
        	this.percent = 0;
        	this.uploading = true;
        },
        handleProgress(event, file, fileList) {
        	this.percent = file.percentage;
        }
	},
	mounted() {
		this.params.sign = Util.sign(localStorage.token, this.params.timestamp, this.params);
	}
}
</script>

<style lang="less">
.ui-upload {
	position: relative;
	width: 100%;
	height: 100%;
	cursor: pointer;
	&-image {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		text-align: center;
		z-index: 1;
		img {
			max-width: 100%;
			max-height: 100%;
			align-items: center;
		}
	}
	&-btn {
		display: table;
		width: 100%;
		height: 100%;
		&-cell {
			display: table-cell;
			text-align: center;
			vertical-align: middle;
			.ivu-icon {
				
			}
			span {
				display: block;
			}
		}
	}
	.ivu-upload {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 2;
		&-select {
			width: 100%;
			height: 100%;
		}
	}
}
.ui-upload.selected .ivu-upload {
	color: #fff;
	background-color: rgba(0, 0, 0, .2);
}
</style>